<template>
    <div class="select-file-dialog" >
        <bi-tab ref="tab">
            <bi-tab-item label="文件列表">
                <div class="tool-box row g-2">
                <div class="col-3">
                    <bi-select v-model="search.time"  placeholder="请选择时间">
                        <bi-select-option value="today" label="今天"></bi-select-option>
                        <bi-select-option value="yesterday" label="昨天"></bi-select-option>
                        <bi-select-option value="week" label="本周"></bi-select-option>
                        <bi-select-option value="month" label="本月"></bi-select-option>
                    </bi-select>
                </div>
                <div class="col-9">
                    <bi-input v-model="search.keyword"  placeholder="请输入文件名" icon="fa fa-search" ></bi-input>
                </div>
            </div>
            <div class="list-content">
                
                <div class="list-item" :class="value==item.file?'checked':''" v-for="item in list" :key="item.filelog_id" @dblclick="selectFile(item,true)"  @click="selectFile(item)" >
                    <bi-icon v-if="!item.image"  class="list-item-icon" :data="item.icon"  ></bi-icon>
                    <bi-picture  v-if="item.image" width="80" height="80"  :src="$uploadUrl(item.file)" ></bi-picture>
                    <div class="title">{{item.title}}</div>
                </div>
                <div class="list-item list-item-more" v-if="loading">
                    <i class="fa fa-spinner fa-pulse " ></i>
                </div>
                <div class="list-item list-item-more" v-if="more" title="下一页" @click="getList(page+1)">
                    <i class="fa fa-angle-right  " ></i>
                </div>

                
            </div>
            </bi-tab-item>

            <bi-tab-item label="文件上传" v-if="!uploadDisabeld" >
                <div class="upload-content" >
                    <label class="input "  v-if="!uploading"   title="上传"  @drop="dropFile" @dragover.prevent="dragOver" @dragenter.prevent="dragEnter" @dragleave.prevent="dragLeave" >
                        <div class="icon upload"><i class="fa fa-cloud-upload "></i></div>
                        <div class="text upload">点击或者拖动文件上传</div>
                        <input type="file" @change="inputFile"  />
                    </label>
                    <div   class="uploading-box "  v-if="uploading" >
                        <div class="icon"><i class="fa fa-spinner fa-pulse "></i></div>
                        <div class="text">正在上传...</div>
                    </div>
                </div>
            </bi-tab-item>

            <bi-tab-item label="预览" name="preview">
                <div class="preview-content">
                    <bi-picture  v-if="previewImage" width="780" height="348"  :src="previewImageUrl(value)" ></bi-picture>
                </div>
            </bi-tab-item>
        </bi-tab>

        <div class="footer row g-2">
            <div class="col-10">
                <bi-input v-model="value"  placeholder="可以填写其他文件地址" ></bi-input>
            </div>
            <div class="col-2">
                <bi-button type="primary" @click="ok" style="width: 100%; height:36px;">确定</bi-button>
            </div>
        </div>
    </div>
</template>

<script>
import {getIcon,isImage} from '../../bi-plug/file.js';
import {uploadFile,debounce} from '../../js/global.js';

export default{
    dialog:{
        title:'选择文件',
        width:800,
        okButton:false
    },
    data(){

        let search = {
            time:'',
            keyword:'',
            size:''
        }


        return {
            list:[],
            value:'',
            more:false,
            loading:false,
            uploading:false,
            previewImage:false,
            search,
            page:1,
            value:'',
            uploadConfig:undefined,
            uploadDisabeld:false
        }
    },
    watch:{
        value(val){
            this.previewImage = false;
            if (val!='' && isImage(val)){
                this.previewImage = true;
            }
        },
        search:{
            handler:debounce(function(val){
                this.getList(this.page);
            },500),
            deep:true
        },
    },
    methods:{
        getList(page){
            this.page = page;
            this.loading = true;
            if (page==1) this.list = [];

          
            this.$ajax({
                url:this.$url({app:'admin',controller:'file',action:'dialogList'}),
                data:{
                    page,
                    ext:this.ext,
                    ...this.search
                },
                success:(res)=>{
                    if (page<res.count) this.more = true;
                    else this.more = false;
 
                    res.list.forEach(element => {
                        if (isImage(element.file)){
                            element.image = true;
                        }else{
                            element.image = false;
                            element.icon = getIcon(element.file);
                        }

                        this.list.push(element);
                    });


                },
                over:()=>{
                    this.loading = false;
                }
            })
        },
        selectFile(item,preview =  false){
            this.value = item.file;
            if (preview && item.image){
                this.$refs.tab.switchTab('preview');
            }
        },
        ok(){
            if (this.value==''){
                this.$alert('请选择文件');
            }else{
                this.dialog.callback(this.value);
                this.dialog.close();
            }
        },
        inputFile(event){
            var files = event.target.files;
            if (files.length ==0){
                this.$alert('请选择要上传的文件');
                return
            }

            this.uploadFile(files[0]);
        },
        dropFile(event){
            event.preventDefault();
            event.stopPropagation();
            var fileList = event.dataTransfer.files;
            if (fileList.length>0){
                this.uploadFile(fileList[0]);
            }
        },
        uploadFile(file){
            let url =this.$url({app:'admin',controller:'file',action:'upload'});
            

            var ext = file.name.substring(file.name.lastIndexOf('.')+1).toLowerCase();
            let extList = Array.isArray(this.ext) ? this.ext : this.ext.split(','); 
            if (extList.length > 0 && extList.indexOf(ext) == -1){
                this.$alert('只能上传['+extList.join(',')+']格式的文件');
                return
            }
            this.uploading = true;

            uploadFile(url,file,{},(path)=>{
                this.value =  path;

                this.$refs.tab.switchTab('preview');
            },()=>{
                this.uploading = false;
            });
        },
        dragEnter(event){
            event.preventDefault();
        },
        dragLeave(event){
            event.preventDefault();
        },
        dragOver(event){
            event.preventDefault();
        },
        previewImageUrl(){
            let skip = ['http://', 'https://','data:'];
            for (let i=0;i<skip.length;i++){

                if (this.value.indexOf(skip[i])==0){
                    return this.value;
                }
            }

            return this.$uploadUrl(this.value);
        }
    },
    mounted(){

        this.$loading();
        this.$ajax({
            url:this.$url({app:'admin',controller:'file',action:'config'}),
            success:(res)=>{
                this.uploadConfig = res;
                this.uploadDisabeld =res.disabled;
                this.$loading(false);
            }
        });
        
        this.getList(1);

    },
    props:{
        ext:{
            type:[String,Array],
            default:'',
        },
        multiple:{
            type:Boolean,
            default:false
        },
        app:{
            type:String,
            default:''
        }
    }
}
</script>


<style>
.select-file-dialog .list-content{
    height: 300px;
    overflow-y: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-top: 10px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, 100px);
}

.select-file-dialog .list-content .list-item-icon{
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:var(--bs-gray-500);
    font-size: 30px;

}
.select-file-dialog .list-content .list-item{
    width: 100px;
    height: 115px;
    text-align: center;
    padding-bottom: 5px;
    display:flex;
    align-items: center;
    flex-direction: column;
    padding-top: 10px;
    cursor: pointer;
    border: 1px solid #FFF;
}
.select-file-dialog .list-content .list-item.list-item-more{
    justify-content: center;
    font-size: 30px;
    color:var(--bs-gray-500);
}


.select-file-dialog .list-content .list-item:hover{
    background-color: rgba(var(--bs-success-rgb),.1);
}

.select-file-dialog .list-content .list-item.checked{
    background-color: rgba(var(--bs-success-rgb),.1);
    border: 1px solid rgba(var(--bs-success-rgb),.2);
}

.select-file-dialog .list-content .list-item .title{
     height: 20px;
    line-height: 20px;
    margin-top: 5px;
    width: 80px;
    overflow: hidden;
    text-align: center;
    font-size: 12px;
}

.upload-content,
.preview-content{
    height: 358px;
}

.upload-content label,
.upload-content .uploading-box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color:var(--bs-gray-400);
}

.upload-content label{
    cursor: pointer;
}

.upload-content:hover label .upload{
    color:var(--bs-gray-600);
}

.upload-content label .icon,
.upload-content .uploading-box .icon{
    font-size: 50px;
}


.upload-content label input{
    display: none;
}

.footer{
    align-items: center;
}
</style>